<template>
  <el-container>
    <!-- 头 -->
    <myHeader></myHeader>
    <div class="search_area">
      <div class="search">
        <el-row class="search__wrap">
          <el-col
            class="searchinput"
            :span="6"
            style="float: left; margin-left: 35px; width: 270px; hight: 40px"
          >
            <el-input
              v-model="content"
              type="text"
              prefix-icon="el-icon-search"
              placeholder="请输入帖子内容"
              style="width: 270px; cursor: pointer"
              @keyup.enter.native="getAllKb"
              @input="(pageNum = 1), load()"
            ></el-input>
          </el-col>
          <el-col :span="8" class="plus"
            ><div class="grid-content bg-purple">
              <el-button
                icon="el-icon-plus"
                circle
                @click="$router.push('/uppost')"
              ></el-button></div
          ></el-col>
        </el-row>
      </div>
    </div>
    <!-- 分类 -->
    <div class="nav">
      <ul>
        <li @click="changeNav(1)">求房源</li>
        <li @click="changeNav(2)">找室友</li>
        <li @click="changeNav(3)">找租客</li>
      </ul>
    </div>
    <!-- 分类结束 -->
    <el-container>
      <el-main>
        <div v-if="Index == 1">
          <div
            class="wrapper"
            v-for="(item, index) in tableData"
            :key="item.id"
          >
            <div
              class="user"
              @click="$router.push('/userdetail?id=' + item.userId)"
            >
              <el-avatar
                class="avatar"
                :size="50"
                :src="item.useravatar"
              ></el-avatar>
              <p class="username">{{ item.nikeName }}</p>
            </div>
            <input :id="index" class="exp" type="checkbox" />
            <div class="text">
              <label class="btn" :for="index"></label>
              {{ item.content }}
            </div>
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <div v-if="Index == 2">
          <div
            class="wrapper"
            v-for="(item, index) in tableData"
            :key="item.id"
          >
            <div
              class="user"
              @click="$router.push('/userdetail?id=' + item.id)"
            >
              <el-avatar
                class="avatar"
                :size="50"
                :src="item.useravatar"
              ></el-avatar>
              <p class="username">{{ item.nikeName }}</p>
            </div>
            <input :id="index" class="exp" type="checkbox" />
            <div class="text">
              <label class="btn" :for="index"></label>
              {{ item.content }}
            </div>
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <div v-if="Index == 3">
          <div
            class="wrapper"
            v-for="(item, index) in tableData"
            :key="item.id"
          >
            <div
              class="user"
              @click="$router.push('/userdetail?id=' + item.id)"
            >
              <el-avatar
                class="avatar"
                :size="50"
                :src="item.useravatar"
              ></el-avatar>
              <p class="username">{{ item.nikeName }}</p>
            </div>
            <input :id="index" class="exp" type="checkbox" />
            <div class="text">
              <label class="btn" :for="index"></label>
              {{ item.content }}
            </div>
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-main>
    </el-container>

    <el-footer><myFooter></myFooter></el-footer>
  </el-container>
</template>


<script>
import myHeader from "../../components/myHeader.vue";
import myFooter from "../../components/myFooter.vue";
import request from "@/utils/request";
export default {
  components: {
    myHeader,
    myFooter,
  },
  data() {
    return {
      type: "",
      total: 0,
      pageNum: 1,
      pageSize: 5,
      content: "",
      tableData: [],
      Index: 1,
      isActive: 1,
      postinfo: [],
    };
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      request
        .get("/mypost/page", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            type: this.type,
            content: this.content,
          },
        })
        .then((res) => {
          this.tableData = res.data.records;
          console.log(this.tableData);
          Promise.all(
            this.tableData.map((row) => this.getUser(row.userId))
          ).then((accounts) => {
            for (let i = 0; i < this.tableData.length; i++) {
              this.$set(this.tableData[i], "nikeName", accounts[i].nikeName);
              this.$set(this.tableData[i], "useravatar", accounts[i].avatarUrl);
            }
          });
          this.total = res.data.total;
        });
    },
    async getUser(id) {
      if (id != null) {
        try {
          const res = await request.get("/user/" + id);
          if (res.code === 200) {
            return res.data;
          } else {
            this.$notify.error(res.msg);
            return "";
          }
        } catch (error) {
          console.error(error);
          this.$notify.error("获取用户失败");
          return "";
        }
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.load();
    },
    jiancha() {
      console.log(typeof this.MoneyVar);
      console.log(this.MoneyVar);
      console.log(this.MoneyVarf);
      // console.log(this.MoneyVar);
    },
    changeClass(i) {
      this.isActive = i;
    },
    // 路由
    // housedetail() {
    //   this.$router.push("/housedetail");
    // },
    changeNav(index) {
      if (index == 1) {
        this.Index = 1;
        this.type = "FIND_HOUSE";
        this.load();
      } else if (index == 2) {
        this.Index = 2;
        this.type = "FIND_ROOMMATE";
        this.load();
      } else if (index == 3) {
        this.Index = 3;
        this.type = "FIND_TENANT";
        this.load();
      }
    },
  },
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header,
.el-footer {
  /* background-color: #b3c0d1; */
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  /* background-color: #d3dce6; */
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  /* background-color: #e9eef3; */
  color: #333;
  text-align: center;
  /* line-height: 160px; */
  overflow: hidden;
}
/* 搜索框区域 */

.search_area {
  width: 100%;
  min-width: 1150px;
  height: 100px;
  padding: 25px 0;
  background: #f5f5f6;
  box-sizing: border-box;
  z-index: 5;
  position: relative;
}
.belike_nav {
  width: 1150px;
  height: 30px;
  margin: 0 auto 30px 300px;
  position: absolute;
}
.belike_nav .belike_nav_tab,
.belike_nav .belike_nav_tab li {
  display: inline-block;
  vertical-align: bottom;
  position: relative;
}
.green_logo {
  position: absolute;
  color: #007e63;
  margin-left: 37px;
}
.green_logo i {
  font-size: 50px;
}

.belike_nav .belike_nav_tab ul {
  margin-left: 73px;
}
.belike_nav .belike_nav_tab li {
  line-height: 25px;
  font-size: 16px;
  margin-right: 30px;
  position: relative;
  font-weight: 700;
  list-style: none;
}

.search {
  margin-top: 65px;
  margin-bottom: 24px;
  position: absolute;
  width: 1150px;
  margin-left: 300px;
}
.search .search__wrap {
  display: inline-block;
  width: 710px;
  line-height: 46px;
  font-size: 14px;
  border-radius: 2px;
  position: relative;
  left: 50%;
  margin-left: -400px;
}
.searchinput {
  margin-left: 35px;
  width: 270px;
  margin-top: -75px;
}
.el-input {
  width: 400px !important;
}
.plus {
  position: absolute;
  margin-left: 460px;
  margin-top: -75px;
}
/* 搜索框区域结束 */

/* 分类导航栏 */
.nav {
  width: 920px;
  margin-left: 294px;
}
.nav ul {
  height: 30px;
  width: 920px;
  padding-left: 0px;
}
.nav li {
  float: left;
  text-decoration: none;
  list-style: none;
  width: 305px;
  text-align: center;
  line-height: 30px;
  font-size: 20px;
  cursor: pointer;
}
.nav li:hover {
  color: #8cbfcc;
}

/* 分类导航栏结束 */

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.postlist {
  /* margin-bottom: 20px; */
  background-color: #fff;
  border-bottom: 1px dashed #e6e6e6;
  cursor: pointer;
  /* width: 900px; */
  width: 650px;
  height: 220px;
  padding: 20px;
  position: relative;
  /* border-top: 1px dashed black; */
  margin-left: -325px;
  left: 50%;
  margin-bottom: 10px;
}
.el-col {
  border-radius: 4px;
}
/* .bg-purple-dark {
  background: #99a9bf;
} */
/* .bg-purple {
  background: #d3dce6;
} */
.bg-purple-light {
  background: #e5e9f2;
}
/* .grid-content {
  border-radius: 4px;
  min-height: 36px;
} */
.wrapper {
  position: relative;
  display: flex;
  margin: 25px auto;
  width: 650px;
  overflow: hidden;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 5px 4px 14px #bebebe, -20px -20px 60px #ffffff;
}
.block {
  position: relative;
}

.user {
  position: absolute;
  width: 200px;
  text-align: left;
  margin-top: -25px;
  margin-left: 50px;
  cursor: pointer;
}
.avatar {
  margin-left: -47px;
  margin-top: 20px;
}

.info {
  position: absolute;
  color: #797979;
  /* float: left; */
  left: 30%;
  font-size: 14px;
  overflow: hidden;
  /* padding-left: 20px; */
  width: 460px;
  text-align: left;
  font-family: Microsoft YaHei, 微软雅黑, Hiragino Sans GB, tahoma, arial,
    simhei;
}
.username {
  color: #333;
  font-size: 20px;
  font-weight: 700;
  font-family: "Microsoft YaHei";
  margin-left: 15px;
  margin-top: -48px;
}
.username:hover {
  text-decoration: underline;
}
.detail {
  font-size: 15px;
  font-weight: 700;
  color: #333;
}
.houseSite {
  color: #666;
  font-size: 14px;
}
.money {
  position: absolute;
  float: right;
  width: 112px;
  right: 5%;
  margin-top: 5%;
  color: #eb5f00;
  font-size: 20px;
  font-weight: 700;
}
.nullCss {
  margin: 60px auto;
  font-size: 14px;
  text-align: center;
  color: #999;
}
/* 多行文本超出省略 */
.text {
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
  /* display: flex; */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  position: relative;
  margin-top: 55px;
}
.text::before {
  content: "";
  height: calc(100% - 24px);
  float: right;
}
.text::after {
  content: "";
  width: 999vw;
  height: 999vw;
  position: absolute;
  box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
  margin-left: -100px;
}
.btn {
  float: right;
  clear: both;
  margin-left: 10px;
  font-size: 16px;
  padding: 0 8px;
  background: #1c92d2;
  line-height: 24px;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  /* margin-top: -30px; */
}
.btn::before {
  content: "展开";
}
.exp {
  display: none;
}
.exp:checked + .text {
  -webkit-line-clamp: 999;
}
.exp:checked + .text::after {
  visibility: hidden;
}
.exp:checked + .text .btn::before {
  content: "收起";
}
</style>